$(function () {
    //头部导航的简单效果
    $(".hnavr").children("li").on("mouseenter", function () {
        if ($(this).find("div")[0]) {
            $(this).css("background", "white").siblings("li").css("background", "#f2f2f2").end().children("div").css("display", "block").end().siblings("li").children("div").css("display", "none");
            $(this).find("span").css("display", "none").parents("li").siblings().find("span").css("display", "block")
            $(this).next().find("span").css("display", "none");
        }
    })
    $(".hnavr").children("li").on("mouseleave", function () {
        $(this).css("background", "#f2f2f2").find("div").css("display", "none").parents("li").find("span").css("display", "block")
    })
    $("#search")[0].placeholder = "面膜";
    $("#search").on("focus", function () {
        $("#search")[0].placeholder = "";
    })
    $("#search").on("blur", function () {
        $("#search")[0].placeholder = "面膜";
    })
    //登入与免登入
    var tempstr = $.cookie("mylogin");
    if (tempstr) {
        $('#e-mail').val(JSON.parse(tempstr).umail);
        $('#code').val(JSON.parse(tempstr).upwd);
    }
    var tempstr = $.cookie("mylogin");
    if (tempstr) {
        $(".hnavl").children("li").eq(1).text("您好：" + JSON.parse(tempstr).umail);
        $(".hnavl").children("li").eq(2).text("退出");

        $(".hnavl").children("li").eq(2).on("click", function () {
            $(".hnavl").children("li").eq(1).text("")
            $(".hnavl").children("li").eq(2).text("")
            $("<a href=\"login.html\">登入</a>").appendTo($(".hnavl").children("li").eq(1))
            $("<a href=\"reg.html\">免费注册</a><span></span>").appendTo($(".hnavl").children("li").eq(2))
        })
    }
    $("#loginbtn1").on("click", function () {

        $.ajax({
            type: "post",
            url: "http://localhost/project/login1.php",
            async: true,
            data: $.toObject($("#myinfo").serialize()),
            success: function (res) {
                if ($(".freelogin").eq(1).find("input[type='checkbox']")[0].checked) {
                    $.cookie('mylogin', JSON.stringify($.toObject($("#myinfo").serialize())), {expires: 7})
                }
            }
        });
    })
    //x写二级三级导航
    var subimgArr = ["url('../img/img-code/subnav0.png')", "url('../img/img-code/subnav1.png')", "url('../img/img-code/subnav2.png')", "url('../img/img-code/subnav3.png')", "url('../img/img-code/subnav4.png')", "url('../img/img-code/subnav5.png')", "url('../img/img-code/subnav6.png')", "url('../img/img-code/subnav7.png')", "url('../img/img-code/subnav8.png')", "url('../img/img-code/subnav9.png')", "url('../img/img-code/subnav10.png')"]
    var sublistArr = ["母婴儿童", "美容彩妆", "服饰鞋包", "家居个护", "营养保健", "海外直邮", "数码家电", "环球美食", "户外运动", "水果生鲜", "药品物资"]
    for (var i = 0; i < $("#subnav>div").length; i++) {
        $("#subnav>div").eq(i).css("background-image", subimgArr[i])
        $("#subnav>div")[i].innerHTML += sublistArr[i];
    }
    //填写三级导航内容
    $("<i class='iconfont icon-2'></i>").prependTo($("#subnav>div"))
    var dArr = ["牛肉", "牛排", "其他肉类", "鸡肉产品", "鸡蛋", "猪肉", "腊肠", "火腿", "驴肉", "火锅食材"];
    var fishArr = ["鱼类/三文鱼", "虾类", "大闸蟹", "其他水产", "海参", "贝类", "螃蟹", "海鲜礼盒", "鱼类制品", "乌贼", "大闸蟹礼券"];
    var cArr = ["冷冻食品", "冷冻面点", "海鲜制品", "奶制品", "蛋糕面包", "冰淇淋", "其他冷冻食品"]
    var fArr = ["火龙果", "奇异果", "榴莲", "柠檬", "牛油果", "苹果", "橙子", "其他水果", "柚子", "枣梨", "石榴", "龙眼"]
    for (var j = 0; j < 9; j++) {
        for (var i = 0; i < fArr.length; i++) {
            $("<li><a href='#'>" + fArr[i] + "</a><span></span></li>").appendTo($("#subnav").children("div").eq(j).find(".box").eq(0).children("ul"));
        }
        for (var i = 0; i < dArr.length; i++) {
            $("<li><a href='#'>" + fArr[i] + "</a><span></span></li>").appendTo($("#subnav").children("div").eq(j).find(".box").eq(1).children("ul"));
        }
        for (var i = 0; i < fishArr.length; i++) {
            $("<li><a href='#'>" + fArr[i] + "</a><span></span></li>").appendTo($("#subnav").children("div").eq(j).find(".box").eq(2).children("ul"));
        }
        for (var i = 0; i < cArr.length; i++) {
            $("<li><a href='#'>" + fArr[i] + "</a><span></span></li>").appendTo($("#subnav").children("div").eq(j).find(".box").eq(3).children("ul"));
        }
        for (var i = 0; i < $(".box").length; i++) {
            $("#subnav").children("div").eq(j).find(".box").eq(i).find("li:last").children("span").remove()
        }
        if ($("#subnav").children("div").eq(j).find(".box").eq(4)) {
            for (var i = 0; i < cArr.length; i++) {
                $("<li><a href='#'>" + fArr[i] + "</a><span></span></li>").appendTo($("#subnav").children("div").eq(j).find(".box").eq(4).children("ul"));
            }
        }
        if ($("#subnav").children("div").eq(j).find(".box").eq(5)) {
            for (var i = 0; i < cArr.length; i++) {
                $("<li><a href='#'>" + fArr[i] + "</a><span></span></li>").appendTo($("#subnav").children("div").eq(j).find(".box").eq(5).children("ul"));
            }
        }
    }
    var trdrArr = [
        ["../img/img-code/q11.jpg", "../img/img-code/q12.jpg", "../img/img-code/q13.jpg", "../img/img-code/q14.jpg", "../img/img-code/q15.jpg", "../img/img-code/q16.jpg", "../img/img-code/q17.jpg", "../img/img-code/q18.jpg", "../img/img-code/q19.jpg"],
        ["../img/img-code/q21.jpg", "../img/img-code/q22.jpg", "../img/img-code/q23.jpg", "../img/img-code/q24.jpg", "../img/img-code/q25.jpg", "../img/img-code/q26.jpg", "../img/img-code/q27.jpg", "../img/img-code/q28.jpg", "../img/img-code/q29.jpg"],
        ["../img/img-code/q31.jpg", "../img/img-code/q32.jpg", "../img/img-code/q33.jpg", "../img/img-code/q34.jpg", "../img/img-code/q35.jpg", "../img/img-code/q36.jpg", "../img/img-code/q37.jpg", "../img/img-code/q38.jpg", "../img/img-code/q39.jpg"],
        ["../img/img-code/q41.jpg", "../img/img-code/q42.jpg", "../img/img-code/q43.jpg", "../img/img-code/q44.jpg", "../img/img-code/q45.jpg", "../img/img-code/q46.jpg", "../img/img-code/q47.jpg", "../img/img-code/q48.jpg", "../img/img-code/q49.jpg"],
        ["../img/img-code/q51.jpg", "../img/img-code/q52.jpg", "../img/img-code/q53.jpg", "../img/img-code/q54.jpg", "../img/img-code/q55.jpg", "../img/img-code/q56.jpg", "../img/img-code/q57.jpg", "../img/img-code/q58.jpg", "../img/img-code/q59.jpg"],
        ["../img/img-code/q61.jpg", "../img/img-code/q62.jpg", "../img/img-code/q63.jpg", "../img/img-code/q64.jpg", "../img/img-code/q65.jpg", "../img/img-code/q66.jpg", "../img/img-code/q67.jpg", "../img/img-code/q68.jpg", "../img/img-code/q69.jpg"],
        ["../img/img-code/q71.jpg", "../img/img-code/q72.jpg", "../img/img-code/q73.jpg", "../img/img-code/q74.jpg", "../img/img-code/q75.jpg", "../img/img-code/q76.jpg", "../img/img-code/q77.jpg", "../img/img-code/q78.jpg", "../img/img-code/q79.jpg"],
        ["../img/img-code/q81.jpg", "../img/img-code/q82.jpg", "../img/img-code/q83.jpg", "../img/img-code/q84.jpg", "../img/img-code/q85.jpg", "../img/img-code/q86.jpg", "../img/img-code/q87.jpg", "../img/img-code/q88.jpg", "../img/img-code/q89.jpg"],
        ["../img/img-code/trd1.jpg", "../img/img-code/trd2.jpg", "../img/img-code/trd3.jpg", "../img/img-code/trd4.jpg", "../img/img-code/trd5.jpg", "../img/img-code/trd6.jpg", "../img/img-code/trd7.jpg", "../img/img-code/trd8.jpg", "../img/img-code/trd9.jpg"]
    ]
    for (var j = 0; j < 9; j++) {
        for (var i = 0; i < trdrArr.length; i++) {
            $("<li><a href='#'><img src=" + trdrArr[j][i] + "></a></li>").appendTo($("#subnav").children("div").eq(j).find(".trdr").children("ul"));
        }
        $("#subnav").children("div").eq(j).find(".trdnav").css("top", -j * 32)
    }
    // 二级导航的出现与消失
    $(".btnav").find("li").eq(0).on("mouseenter", function () {
        $(this).find("#subnav").css("display", "block")
        //三级导航的出现与消失
        $("#subnav").children("div").on("mouseenter", function () {
            $(this).find(".trdnav").css("display", "block")
        })
        $("#subnav").children("div").on("mouseleave", function () {
            $(this).find(".trdnav").css("display", "none")
        })
    })
    $(".btnav").find("li").eq(0).on("mouseleave", function () {
        $(this).find("#subnav").css("display", "none")
    })

    var str = window.location.search;
    var srr = str.split("?")
    var srrr = srr[1].split(";")
    var sttt = srrr[1].split("=")
    var srrrr = srrr[0].split("=")
    console.log(srrrr[1], parseInt(sttt[1]));
    axxx(srrrr[1],parseInt(sttt[1]))
    function axxx(ll,ss) {
    $.ajax({
        url: "../json/" + ll,
        success: function (res) {
            console.log(res);
            var arrList = res.zone_data[0].showGoodsList[ss].goods
            $(".bigImg").children("img").attr("src", arrList.imageUrl);
            $(".buyl").children("img").attr("src", arrList.imageUrl);
            $(".bhsp").text(">" + arrList.title);
            $("<li class='redd'><img src=" + arrList.imageUrl + "></li>").appendTo($('.buyl').children('ul'));
            $(".brtop").children("img").attr("src", arrList.countryCode.flagImage);
            $(".brtop").children("span").eq(0).text(arrList.countryCode.name);
            $(".brtop").children("a").eq(0).text(arrList.brandName);
            $(".buyr").children("p").eq(0).find("span").eq(2).text(arrList.title);
            $(".buyr").children("p").eq(0).find("span").eq(0).text(arrList.memberCount + arrList.memberUnitName);
            $(".buyr").children("p").eq(1).text(arrList.subTitle);
            $(".piece").children("span").eq(1).text("￥" + arrList.actualCurrentPrice.toFixed(2));
            $(".piece").children("span").eq(2).text("每" + arrList.memberUnitName + arrList.memberPrice + "元");
            $(".piece").children("span").eq(4).text("参考价格￥" + parseInt((arrList.actualCurrentPrice) / (arrList.discount / 10)).toFixed(2));
            $(".sh").find("span").eq(1).text("预估￥" + arrList.actualCurrentPrice * arrList.commentPoint / 1000 + "，实际税费请以提交订单时为准");
            $(".bottomrelatedl").children("p").eq(0).children("span").eq(0).text("品牌名 : " + arrList.brandName);
            $(".bottomrelatedl").children("p").eq(0).children("span").eq(1).text("品牌名 : " + arrList.countryCode.name);

            //切换图片
            $(".buyl").find("li").on("click", function () {
                $(this).addClass('redd').siblings("li").removeClass('redd')
                $(".buyl img").attr("src", $(this).children("img").attr("src"))
            })
        }
    })
}
    //相关链接
    related("../json/jjgh.json",".related");
    related("../json/jjgh.json",".leftrelated");
    //放大镜
    $(".buyl img").on("mouseenter",function () {
        $(".smallImg").css("display","block")
        $(".bigImg").css("display","block")
        $(window).on("mousemove",function (evt) {
            var X = evt.clientX-$(".buyl img").offset().left-100;
            var Y = evt.clientY-$(".buyl img").offset().top+$(window).scrollTop()-100;
            if(X<=0){
                X=0;
            }
            if(X>=200){
                X=200;
            }
            if(Y<=0){
                Y=0;
            }
            if(Y>=200){
                Y=200;
            }
            $(".smallImg").css({"top":Y,"left":X})
            $(".bigImg img").css({"top":-2*Y,"left":-2*X})
        })
    })
    $(".buyl").on("mouseleave",function () {
        $(".smallImg").css("display", "none")
        $(".bigImg").css("display", "none")
    })
    //teb栏切换
    init_city_select($("#sel2"));

$(".toprelated").children("span").on("click",function () {
        $(this).addClass("tabpl").siblings("span").removeClass("tabpl")
        $(".bodyqh").children("div").eq($(this).index()).css("display","block").siblings("div").css("display","none")
    })
    $(".toprelated").children("span").eq(0).addClass("tabpl")
    $(".fixed").css({top:$(".bht").offset().top+20,"left":$("#body .wrapper").offset().left+$("#body .wrapper").width()+20})
    $(".top").children("section").on("click",function () {
        $(this).css("color","red").siblings().css("color","black");
        var Index = $(this).index();
        $(".middle").children("section").eq(Index).css("display","block").siblings().css("display","none");
        if(Index==1){
            $(".middle").css("height","230px");
        }else {
            $(".middle").css("height","254px");
        };
    })

// 生成相应的文本框
    add();

    $(".click-code").on("mouseenter",function () {
        $(this).css("color","red");
    })
    $(".click-code").on("mouseleave",function () {
        $(this).css("color","gray");
    })
    //点击切换登入方式
    var flag =true;
    $(".click-code").on("click",function () {
        if(flag==true){
            flag=false;
            if($(".byplone .code")){
                $(".byplone .code").remove()
            }
            $("#loginbtn").before($("<section class='imgcode'></section>"));
            $(".byplone .imgcode").append($("<img id='dragimg' src='../img/img-code/slider_valid.png'>"));
            $("#loginbtn").before($("<section class='telecode'></section>"));
            $(".byplone .telecode").append($("<span>获取验证码</span>"));
            $(".byplone .telecode").append($("<input type='password' id='code1' placeholder='请输入密码'>"));
            $(".middle").css("height","290px");
            $(".byplone .freelogin").children("a").text("遇到问题？").css("font-size","12")
            $(".imgcode").on("mouseenter",function () {
                $(".imgcode").append($("<section class='codeimg'></section>"))
                $(".byplone .codeimg").append($("<img src='../img/img-code/slider_valid.png'>"));
                $(".byplone .codeimg img").css({"left":getRan(0,207)+"px","top":getRan(0,60)+"px"})
            })
            $(".imgcode").on("mouseleave",function () {
                $(this).children(".codeimg").remove();
            })
            $("#dragimg").on("mousedown",function (evt) {
                var disX=evt.offsetX;
                $(document).on("mousemove",function (evt) {
                    var X=evt.clientX-$("#body .wrapper .login .imgcode").offset().left-disX;
                    if(X<=0){
                        X=0;
                    }
                    if(X>=207){
                        X=207;
                    }
                    $("#dragimg").css("left",X);
                })
                $(document).on("mouseup",function () {
                    $(this).removeClass("on");
                    $(document).unbind("mousemove")
                    $(".imgcode").children(".codeimg").remove();
                })
            })
        }else {
            flag=true;
            if($(".byplone .imgcode")){
                $(".byplone .imgcode").remove();
                $(".byplone .telecode").remove();
                $(".middle").css("height","254px");
                $(".byplone .freelogin").children("a").text("忘记密码？").css("font-size","12")
            }
            add();
        }
    })

//点击出现登入
$(".fixed").find("li").eq(0).on("click",function () {
    login();
})
$(".buynow").find("div").eq(0).on("click",function () {
    login();
})
//移动导航条
    var Fixt = $(".fixed").offset().top;
    $(window).on("scroll",function () {
       if(Fixt-$(this).scrollTop()<50){
           $(".fixed").css({"position":"fixed","top":40})
       }else {
           $(".fixed").css({"position":"absolute","top":Fixt})
       }
    })
    var count = 1;
    if($(".sl").children("span").eq(2)){

    }else {
        $(".sl").children("span").eq(1).children("i").eq(0).on("click",function () {
            console.log(count)
            if(count>1){
                count--;
            }
            $(this).next("input").val(count)
        })
        $(".sl").children("span").eq(1).children("i").eq(1).on("click",function () {
            count++;
            console.log(count)
            $(this).prev("input").val(count)
        })
    }
    //图片多多
    var Allimg= ["../img/img-code/date1.jpg","../img/img-code/date.jpg","../img/img-code/date1.jpg","../img/img-code/date3.jpg","../img/img-code/date4.jpg","../img/img-code/date5.jpg","../img/img-code/date6.jpg","../img/img-code/date7.jpg","../img/img-code/date8.jpg","../img/img-code/date9.jpg","../img/img-code/date10.jpg","../img/img-code/date11.jpg","../img/img-code/date12.jpg","../img/img-code/date13.jpg","../img/img-code/date14.png","../img/img-code/date15.png","../img/img-code/date15.png"]
    for(var i=0;i<Allimg.length;i++){
    $("<img src="+Allimg[i]+">").appendTo($(".allimg"))
    }
    $(".bodyqh").css("height",$(".bottomrelatedl").height())
})
function related(urle,classname) {
$.ajax({
    url:urle,
    success:function (res) {
        var arrList =res.zone_data[0].showGoodsList
        var arrRelated = [];
        var numarr = [];
        var count = 0;
        var num = 0;
        for(var i=0;i<arrList.length;i++){
            count++;
            num=getRan(0,39)
            if(numarr.length<$(classname).find("li").length){
                if(numarr.indexOf(num)!=-1){

                }else {
                    count++;
                    numarr.push(num);
                    arrRelated.push(arrList[num])
                }
            }
        }
        for(var i=0;i<arrRelated.length;i++){
            $("<img src="+arrRelated[i].goods.imageUrl+">").prependTo($(classname).find("li").eq(i));
            $(classname).find("li").eq(i).children("p").eq(0).children("a").text(arrRelated[i].goods.title)
            $("<p>￥"+arrRelated[i].goods.actualCurrentPrice+"<span>￥"+parseInt((arrRelated[i].goods.actualCurrentPrice)/(arrRelated[i].goods.discount/10))+"</span></p>").appendTo($(classname).find("li").eq(i));
            $("<p>已有100人评价</p>").appendTo($(classname).find("li").eq(i));
        }

    }
})

}


function add() {
    $("#loginbtn").before($("<section class='code'></section>"));
    $(".byplone .code").append($("<i class='iconfont icon-mima'></i>"));
    $(".byplone .code").append($("<input type='password' id='code1' placeholder='请输入密码'>"));
}

function login() {
    $(".login").css("display","block");
    $("<i class='xxx'>X</i>").appendTo($(".login"));
    $("#allall").css("display","block")
    $(".xxx").on("click",function () {
        $(".login").css("display","none");
        $("#allall").css("display","none")
    })
}